<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">风险评估排行</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  data() {
    return {
      userData: {
        id: ''
      },
      config: {
        header: ['公司','地址', '风险数值'],
        data: [],
        // "data": [
        //   ["航空发动机集团有限公司", "北京", "<span class='colorGrass'>↑65%</span>"],
        //   ["航发商用航空发动机有限责任公司", "上海", "<span class='colorGrass'>↑70%</span>"],
        //   ["沈阳黎明航空发动机有限责任公司", "辽宁沈阳", "<span class='colorGrass'>↑58%</span>"],
        //   ["贵州黎阳航空动力有限公司", "贵州贵阳", "<span class='colorRed'>↓12%</span>"],
        //   ["成都发动机有限公司", "四川成都", "<span class='colorGrass'>↑60%</span>"],
        //   ["广联航空工业股份有限公司", "哈尔滨", "<span class='colorGrass'>↑72%</span>"],
        //   ["驰达飞机零部件制造股份有限公司", "陕西西安", "<span class='colorGrass'>↑55%</span>"],
        //   ["航飞航空机械设备制造有限公司", "四川成都", "<span class='colorGrass'>↑52%</span>"],
        //   ["无锡航亚科技股份有限公司", "江苏无锡", "<span class='colorRed'>↓9%</span>"],
        //   ["北京北内发动机零部件有限公司", "北京", "<span class='colorGrass'>↑48%</span>"]
        // ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [100, 100, 100],
        align: ['center']
      }
    }
  },
  mounted() {
    this.userData.id = this.$store.state.user.userInfo.id;
    console.log(this.userData.id, 'centerRight1 userData.id')
    console.log('centerRight1 mounted')
    this.init()
  },
  methods: {
    ...mapActions(['topTenRiskCompany']),
    async init() {
      const response = await this.topTenRiskCompany(this.userData.id);
      console.log('接口返回数据centerRight1:', response.data);

      const rawData = response.data;
      this.config = {
        ...this.config,
        data: rawData.map(item => [
          item.name,
          item.location,
          item.riskValue.toString()
        ])
      };
    }


  }
}
</script>

<style lang="scss" scoped>
$box-height: 400px;
$box-width: 510px;
#centerRight1 {
  padding: 16px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
    font-size: 15px;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 450px;
      height: 340px;
    }
  }
}
</style>
